<template>
  <div class="post">
    <div class="menu" v-if="config">
      <el-menu
        :unique-opened="true"
        :default-active="active"
        class="el-menu-vertical-demo"
        @select="handleSelect"
      >
        <menuItem :items="config" />
      </el-menu>
    </div>
    <div class="content">
      <iframe
        v-if="pageSrc"
        style="height: 100%; width: 100%"
        :src="pageSrc"
        frameborder="0"
      />
    </div>
  </div>
</template>

<script>
import menuItem from "@/components/menu-item.vue";
import axios from "axios";

const initConfig = {
  驾驶舱: "驾驶舱-专业平台库城市消防专业平台-关键指标分析",
  事件复盘: "事件复盘-会商总结分析-智能报表-报表管理",
  事件感知: "事件感知-事件风险感知-事件首报-事件续报",
  后台管理: "后台管理-业务处理后台管理-专家库管理",
  调度处置: "调度处置-多级调度处置管理-区县及以下调度处置",
};

export default {
  components: {
    menuItem,
  },
  data() {
    return {
      configAll: null,
      dataMap: null,
      pageSrc: null,
      active: "",
    };
  },
  async mounted() {
    this.pageSrc = "/mockPage";
    this.initDate();
  },
  computed: {
    module() {
      return this.$route.query?.module;
    },
    config() {
      return this.configAll?.[this.module] || this.configAll;
    },
  },
  methods: {
    changePage(param) {
      let search = Object.keys(param).reduce((a, b) => {
        if (b === "INITIAL_DATA") {
          localStorage.setItem(param.STORE_NAME, JSON.stringify(param[b]));
          return a;
        }
        return `${a}&${b}=${param[b]}`;
      }, "?");
      this.pageSrc = "/mockPage" + search;
    },
    handleSelect(index) {
      console.log("handleSelect", index);
      let param = this.dataMap[index];
      this.changePage(param);
    },
    async initDate() {
      let { data: config } = await axios(location.origin + "/json-routes.json");
      console.log(config);
      let R = {};
      let D = {};
      Object.keys(config).forEach((key) => {
        let item = config[key];
        let routes = item.PAGE_TITLE.split("-");
        routes.push(item);
        routes.reduce((obj, v) => {
          let t = typeof v;
          if (t === "string") {
            if (!obj[v]) {
              obj[v] = {};
            }
            return obj[v];
          } else {
            if (!obj.INITIAL_DATA) {
              Object.assign(obj, v);
            }
            // Object.assign(obj, v, {
            //   INITIAL_DATA: [...(obj.INITIAL_DATA || []), ...v.INITIAL_DATA],
            // });
            D[obj.PAGE_TITLE] = obj;
            return obj;
          }
        }, R);
      });
      this.configAll = R;
      this.dataMap = D;
    },
  },
  watch: {
    module() {
      if (this.module) {
        this.active = initConfig[this.module];
        this.handleSelect(this.active);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.post {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  display: flex;
  .menu {
    height: 100%;
    width: 300px;
    background: white;
    overflow-y: scroll;
  }
  .content {
    height: 100%;
    width: calc(100% - 300px);
  }
}
</style>
